<template>
	<view style="height: 100%;">
		<!-- 商家的图片显示 -->
		<!-- (tophight.bottom+tophight.height) 当前为商家的图片显示区域，顶部导航栏+状态栏的高度 -->
		<view :style=" 'height:' + (tophight.bottom+tophight.height) + 'px;width:100%;'">
			<!-- 小程序向后退 -->
			<!-- aspectFill center -->
			<image :src="sellerInfo.sellerIcon" style="width: 100%;height: 100%;" mode="aspectFill center"></image>
		</view>
		
		
		
		<view class="seller-title-card" :style="'top:-' + (tophight.height) + 'px'">
			<view class="seller_include">
				<view class="seller-img-contain">
					<image :src="sellerInfo.avatar"></image>
				</view>
				<view class="seller-img-bottom" >
					<view class="seller_introduce" style="align-items: center;">
						<text>{{sellerInfo.nickname}}</text>
						<!-- <button style="width: 130upx;height: 50upx;text-align: center; line-height: 50upx;">收藏</button> -->
						<uni-fav :checked="enshrineFlag" @click="favClick" :star="false"></uni-fav>
					</view>
					<view class="seller-sort-designation">
						长沙好翅膀第一名
					</view>
					
				</view>
			</view>
			<!-- 公告 -->
			<view class="announcement">
				<text>{{sellerInfo.publicNotice}}</text>
			</view>
		</view>

		<!-- 商品展示 -->
		<view id="goods-show-split" :style="'height:'+sellerGoodsTop + 'px'">
			<!-- {{sellerGoodsTop}} -->
			 <!-- 商品展示 :sellerInfo="sellerInfo"-->
			<SellerGoods></SellerGoods>
		</view>
		
	</view>
</template>

<script>
	// 引入vuex的mapState
	import {mapState} from 'vuex'
	
	// 引入商品展示
	import SellerGoods from '../../components/seller/sellergoods'
	
	import {getRequest, getPost} from '../../api/api.js'; // 请求接口
	import {getSellerInfo} from '../../api/request.js'; // 请求路径
	
	export default {
		components: {
			SellerGoods
		},
		data() {
			return {
				enshrineFlag: false, // 收藏
				sellerId: '',// 商家编号
				sellerInfo: { // 返回的商家商品信息
					"sellerId": "",
					"username": "",
					"nickname": '',
					"sellerIcon": "",
					"categoryList": [{
						"categoryId": 1,
						"categoryName": "",
						"proInfoList": [
							{
							  "productId": "12543136",
							  "productName": "爆炒腊肠",
							  "productPrice": 12.4,
							  "productStock": 80,
							  "productDescription": "goods",
							  "productIcon": "http://localhost:8009/images/seller/822df53f-bf7e-4634-820c-9870c54e8098.jpg",
							  "productStatus": 0,
							  "categoryId": 1,
							  "categoryName": null,
							  "createTime": "2022-02-18 10:15:38",
							  "updateTime": "2022-03-02 19:28:02"
							},
						]
					}]
				},
				/*页面导航栏的各个属性值*/
				tophight:{},
				srcURL: '../../static/logo.png',
				sellerGoodsTop: 0,
				windowHeight: 0,
				testHeight: 200,
				
				sellerGoodsTop: 0,
				
				
			}
		},
		
		/*
			tophight.bottom+tophight.height === 商家图片的高度
			商家图片 height: 120upx;  == 60px
			公告25px
			
			// 需要接收图片
		*/
		onLoad(options) {
			this.sellerId = options.sellerId;
			console.log(this.sellerId + "---------------------------------<>");
			// 将值放到数据仓库中
			console.log(this.$store);
			this.$store.commit('gloalSellerId',this.sellerId)
			
			console.log("接收到的参数" + options.sellerId);
			this.tophight = uni.getMenuButtonBoundingClientRect();
			console.log(this.tophight);
			
			console.log("sellershow 我被加载了 start" + this.tophight);
			// 监听筛选组件距离顶部的距离
			console.log('数据完成');
			let that = this;
			const safeare = wx.getSystemInfo({
				success(res){
					that.getInfo(res);
					// console.log("系统高度" + res);
					// console.log(res.windowHeight + "系统高度");
					// // sellerGoodsTop
					// that.windowHeight = res.windowHeight;
					// // this.windowHeight = res.windowHeight;
					// 80是点菜评价里面的 ，在加上20表示他们之间多余的间距
					that.sellerGoodsTop = res.windowHeight - (that.tophight.bottom+that.tophight.height+60+25+80); 
					that.getInfo(res);
					// console.log("卖家商品大小：" + that.sellerGoodsTop);
				}
			});
			// console.log(safeare)
		
			// this.sellerGoodsTop = 
			console.log("里面的。。" + this.sellerGoodsTop);
			console.log("sellershow 我被加载了 end" + this.tophight);
				
			let url = getSellerInfo+this.sellerId;;
			console.log(url);
				
			uni.request({
				url:url,
				method:"post"
			}).then((res)=> {
				console.log(res);
				this.sellerInfo = res[1].data.data.list;
			})

			
		},

		methods: {
			// 收藏按钮点击
			favClick() {
				this.enshrineFlag = !this.enshrineFlag;
				console.log(this.enshrineFlag?"收藏":"取消收藏")
			},
			
			getInfo(res) {
				// this.windowHeight = res.windowHeight;
				console.log("运行了" + this.windowHeight);
			},
			
			// // 获取商家的商品信息
			// getSellerInfoList() {
			// 	let url = `${getSellerInfo}${this.sellerId}`;
			// 	console.log("---------------------------------");
			// 	Promise.all([getPost(url)])
			// 	.then((res)=> {
			// 		console.log(res);
			// 	})
			// 	console.log("---------------------------------");	
			// },
			
			// fun1(url){
			//     return getPost(url);
			// }
			
			
		},
		

		
		/* 挂载时进行创建 */
		mounted() {
			
		}
	}
</script>

<style scoped>
	.seller-title-card {
		box-shadow:5upx 10upx 10upx 5upx #888888;
		/* border-style:solid; */
		padding: 10upx 10upx 10upx 10upx;
		/* z-index: 10000000; */
		background-color: white;
		/* margin: 20upx; */
		position: relative;
 		/* background-color: #666666; */
		margin-left: 10%;
		margin-right: 10%;
/*		padding-left: 10%;
		padding-right: 10%;*/
		width: 80%; 
		justify-content:flex-start;
		border-radius: 20upx;
	}
	
	.seller_include {
		display: flex;
		justify-content: flex-start;
		/* width: 100%; */
		/* background-color: #007AFF; */
		
	}
	
	.seller-img-bottom {
		/* width: auto; */
		margin-top: 15upx;
	}
	
	.seller_introduce {
		/* background-color: #303133; */
		/* width: 80%; */
		/* display: flex; */
		display:flex;
		justify-content:space-between;
	}
	
	.seller_introduce text {
		/* width: 20%; */
		width: 300upx;
		font-size: 40upx;
		overflow:hidden; /* 超出一行文字自动隐藏  */
		text-overflow:ellipsis; /* 文字隐藏后添加省略号 */
		white-space:nowrap; /* 强制不换行 */
	}
	
	.seller_introduce button {
		/* margin-right: 50upx; */
		/* right: 0; */
	}
	
	.seller-img-contain {
		
	}
	.seller-title-card image{
		margin: 10upx 10upx 10upx 10upx;
		width: 120upx;
		height: 120upx;
	}
	
	/* 商家称号 */
	.seller-sort-designation {
		margin-top: 20upx;
	}
	
	.announcement {
		padding-left: 10upx;
		padding-right: 10upx;
		overflow:hidden; /* 超出一行文字自动隐藏  */
		text-overflow:ellipsis; /* 文字隐藏后添加省略号 */
		white-space:nowrap; /* 强制不换行 */
		line-height: 50upx;
	}
	
	
	
	.top-title {
		display: flex;
		justify-content: flex-start;
	}
	
	.title-bottom {
		margin-left: 20upx;
	}
	
	.title-bottom text{
		line-height: 70upx;
		font-weight: bold;
		font-size: 35upx;
	}
	
	.title-bottom view{
		height: 10upx;
		width: 80%;
		margin-left: 10%;
		margin-right: 10%;
		/* background-color: #F0AD4E; */
	}

</style>
